<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 500px;height:100px;border: solid 1px #ccc;background: #efefef;position: absolute;left: 0;right: 0;margin: 0 auto;display: none}
        .cont{width: 400px;height: 100px;border: solid 1px black;margin: 50px auto;position:relative}
        .cont p{margin: 0;height: 20px;position: absolute;left: 0;top: 40px;background: blue;width: 0;color: #fff;line-height: 20px;text-align: center}
    </style>
</head>
<body>
    <div class="cont">
        <p></p>
    </div>
    <div id="box">
        <form action="">
            <p>要显示的信息</p>
            <input type="text" value="" placeholder="请输入内容">
            <input type="button" value="确定" id="btn">
        </form>
    </div>
</body>
<script>
    var obox = document.getElementById("box");
    var obtn = document.getElementById("btn");
    // 页面加载之后，显示
    // onload = function(){
    //     obox.style.display = "block";
    // }
    // 点击确定之后，延迟消失
    obtn.onclick = function(){
        setTimeout(function(){
            obox.style.display = "none";
        },3000);
    }


    // ====================

    var ocont = document.getElementsByClassName("cont")[0];
    var op = document.querySelector(".cont p");

    // 计算目标
    var target = ocont.offsetWidth;
    // 准备计时器的容器
    var t;
    // 步长：一个时间单位要移动的距离
    var speed = 3;

    // 开启计时器
    t = setInterval(function(){
        // 判断剩下的距离是否够一步
        if(target - op.offsetWidth < speed){
            // 不够，停止
            clearInterval(t);
            // 强行设置到终点
            op.style.width = "400px";
            op.innerHTML = "100%";
            // 进度条到达终点之后，弹出广告框
            obox.style.display = "block";
        }else{
            // 够一步
            // 增加设置一个speed的距离
            op.style.width = op.offsetWidth + speed + "px";
            // 计算百分比
            op.innerHTML = parseInt(op.offsetWidth / target * 100) + "%";
        }
    }, 30);


</script>
</html>